<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2-背景图片大小</title>
		<style type="text/css">
			div{
				width:500px;
				height:300px;
				border:1px solid red;
				background: url(images/1.jpg) no-repeat;
			}
			div:nth-child(2){
				/* 图片的宽高被挤压，清晰度降低 */
				background-size: 500px 300px;
			}
			div:nth-child(3){
				/* 图片的宽高被挤压，清晰度降低 */
				background-size: 100% 100%;
			}
			div:nth-child(4){
				/* 图片没有被挤压变形，但是盒子有间隙空白 */
				background-size: contain;
			}
			div:nth-child(5){
				/* 图片没有被挤压变形，但是丢失图片部分 */
				background-size: cover;
			}
			div:nth-child(6){
				/* 图片没有被挤压变形，但是丢失图片部分 */
				width:500px;
				height:300px;
				background: rgba(0,0,0,.3) url(images/city.jpg) no-repeat left center / contain;
				border:1px solid blue;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>
